<template>
  <view class="content">
    <view class="doctor-top">
      <view class="nav-bar">
        <image
          src="@/static/img/courseBuy/back.png"
          class="img"
          alt=""
          @tap="backHandle"
        ></image>
        <view class=""> 专家主页 </view>
        <image
          src="@/static/img/courseBuy/scritotwo.png"
          class="img"
          @tap="shandleHandle"
        ></image>
      </view>
      <view class="doctor-content">
        <view class="doctor-desc">
          <u-avatar
            :src="doctorData.face || ''"
            mode="circle"
            size="160"
          ></u-avatar>
          <view class="name-score">
            <view class="name">
              {{ doctorData.realName || "--" }}
            </view>
            <view class="score">
              <image
                src="@/static/img/courseBuy/collect2.png"
                mode=""
                style="width: 24rpx; height: 24rpx; margin-right: 10rpx"
              >
              </image>
              {{
                doctorData.expertStatistics.scoreAvg
                  ? doctorData.expertStatistics.scoreAvg.toFixed(1)
                  : "暂无评"
              }}分
            </view>
          </view>
          <view
            @tap="viewDetail"
            style="
              border-bottom: 2rpx solid #ccc;
              margin-right: 70rpx;
              padding-bottom: 10rpx;
            "
            >个人简介</view
          >
          <view class="like-btn">
            <view
              class="follow-btn"
              v-if="doctorData.focus == false"
              @tap="concern"
            >
              +关注
            </view>
            <view class="follow-btn2" v-if="doctorData.focus" @tap="concern">
              已关注
            </view>
            <view v-if="doctorData.liked" class="follow-btn2" @tap="goodexpert"
              >点赞</view
            >
            <view
              v-if="doctorData.liked == false"
              class="follow-btn"
              @tap="goodexpert"
              >点赞</view
            >
          </view>
        </view>
        <view class="special-desc" @tap="viewDetail">
          <text>擅长：</text>
          <text class="desc">
            {{ doctorData.domain ? doctorData.domain.trim() : "--" }}</text
          >
        </view>
      </view>
    </view>
    <!-- 主体-预约/挂号-评价 -->
    <view class="main-content">
      <!-- //导航 -->
      <view class="switch-tab container">
        <u-tabs
          :list="list"
          :is-scroll="false"
          :current="current"
          @change="change"
          bg-color="#F5F5F5"
          active-color="#F4333C"
          inactive-color="#5E5E5E"
          font-size="30rpx"
          :bold="false"
        >
        </u-tabs>
      </view>
      <!-- <view class="main-layout">
        <view class="flex-two">
          <view class="flex-item" @tap="toStartConsulting">
            <view class="title">
              在线咨询（{{ doctorData.registerPrice }}元）
            </view>
            <view class="ask-btn"> 开始咨询 > </view>
          </view>
          <view class="flex-item" @tap="toStartRegister">
            <view class="title">
              预约挂号（{{ doctorData.consultPrice }}元）
            </view>
            <view class="ask-btn"> 前往预约 > </view>
          </view>
        </view>
      </view> -->
      <swiper
        class="swiper-box"
        :current="current"
        @animationfinish="animationfinish"
      >
        <swiper-item class="swiper-item">
          <!-- 两张横图 -->
          <view class="main-layout">
            <view class="flex-two">
              <view class="flex-item" @tap="toStartConsulting">
                <view class="title">
                  在线咨询（{{ doctorData.registerPrice }}元）
                </view>
                <view class="ask-btn"> 开始咨询 > </view>
              </view>
              <view class="flex-item" @tap="toStartRegister">
                <view class="title">
                  预约挂号（{{ doctorData.consultPrice }}元）
                </view>
                <view class="ask-btn"> 前往预约 > </view>
              </view>
            </view>
          </view>
          <!-- 患者评价开始 -->
          <scroll-view scroll-y="true" style="height: 800rpx">
            <view class="patient-evaluation">
              <comment :commentList="commentList || []"></comment>
              <view
                @tap="addRandomData('咨询/挂号')"
                class="view-more"
                v-if="commentList ? commentList.length > 0 : false"
              >
                {{ page > list.length ? "查看更多" : "没有更多了" }}
              </view>
            </view>
          </scroll-view>
          <!-- 患者评价结束 -->
          <!-- <view class="commets-input2">
            <u-input v-model="commentsVal" :auto-height="true" maxlength="390" :clearable="false" class="text" type="textarea" placeholder="快来说说学习感受..." />
            <view class="subcomment2" @tap="subcomment">发布评论</view>
          </view> -->
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y="true" style="height: 100%">
            <view class="container">
              <view
                class="demo-warter2"
                v-for="(item, index) in flowList"
                :key="index"
                @tap="toCourseDetail(item.id)"
              >
                <view class="isTop" v-if="item.isTop == 1">
                  <image
                    src="@/static/img/base/top.png"
                    mode=""
                    class="top-img"
                  ></image>
                </view>
                <image
                  :src="item.coverPath"
                  mode=""
                  class="course-image2"
                ></image>
                <view class="course-list2">
                  <view class="demo-title">
                    {{ item.seriesName }}
                  </view>
                  <view class="author2">
                    <u-avatar :src="item.expertFace" size="36"></u-avatar>
                    <view class="author-name">{{ item.expertName }}老师 </view>
                  </view>
                  <view class="desc-price">
                    <view class="demo-person"> {{ item.learnNum }}人看过 </view>
                    <view
                      class="demo-price1"
                      v-if="!item.isFree && !item.isBuy"
                    >
                      ￥{{ item.isCharge == 0 ? "免费" : item.isCharge }}
                    </view>
                    <view class="demo-price2" v-else-if="item.isFree">
                      免费
                    </view>
                    <view class="demo-price3" v-else> 已购买 </view>
                  </view>
                </view>
              </view>
              <view @tap="addRandomData('课程')" class="view-more">
                {{ page > list.length ? "查看更多" : "没有更多了" }}
              </view>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y="true" style="height: 100%">
            <view class="container">
              <broadcast></broadcast>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y="true" style="height: 100%">
            <view class="container">
              <news :newsList="expertKnowledgeData"></news>
              <view @tap="addRandomData('知识')" class="view-more">
                {{ page > list.length ? "查看更多" : "没有更多了" }}
              </view>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y="true" style="height: 100%">
            <dynamic></dynamic>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 医生个人详情开始 -->
    <u-popup
      v-model="isshow"
      mode="bottom"
      border-radius="20"
      :closeable="true"
    >
      <view class="person-detail">
        <view class="popup-title">个人详情</view>
        <scroll-view scroll-y="true" style="height: 844rpx">
          <view class="container">
            <view class="popup-desc-top mb-60">
              <image :src="String(doctorData.face)" mode="" class="img"></image>
              <view class="right-desc">
                <view class="">
                  {{ doctorData.realName }}
                </view>
                <!-- 场地名 -->
                <view>
                  {{ doctorData.siteName }}
                </view>
              </view>
            </view>
            <view class="popup-desc-content">
              <text>擅长：</text>
              <text class="desc-content">{{ doctorData.domain }}</text>
            </view>
            <view class="popup-desc-content">
              <text>简介：</text>
              <text class="desc-content">{{ doctorData.introduction }}</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </u-popup>
    <!-- 医生个人详情结束 -->
  </view>
</template>

<script>
import broadcast from "./broadcast.vue";
import dynamic from "./dynamic.vue";
import comment from "./comment/index.vue";
import news from "./news.vue"; // 知识-新闻列表
import { API } from "../../config/myApi.js";
export default {
  components: {
    comment,
    news,
    broadcast,
    dynamic,
  },
  data() {
    return {
      //tab菜单选项栏
      list: [
        {
          name: "咨询/挂号",
        },
        {
          name: "课程",
        },
        {
          name: "直播",
        },
        {
          name: "知识",
        },
        {
          name: "动态",
        },
      ],
      doctorId: "",
      commentsVal: "",
      //医生个人详情
      doctorData: {
        // collectSum: 500
        // consultPrice: "7.00"
        // domain: " “运动处方”根据少儿、中青年、老年等群体不同的身体状况，提供针对性的健身方案，将健康关口前移"
        // face: null
        // id: "1000001"
        // patientNum: 3124
        realName: "--", // 医生名
        domain: "", // 擅长
        introduction: "", //简介
        expertStatistics: {
          scoreAvg: 0,
        },
        // registerPrice: 12
        // scoreAvg: 4.899
        // siteName: "成都高新广场"
      },
      // mock
      //tab当前项
      current: 0,
      // 两张横图
      list2: [
        {
          name: "咨询/挂号",
        },
        {
          name: "课程",
        },
        {
          name: "直播",
        },
        {
          name: "知识",
        },
        {
          name: "动态",
        },
      ],
      // 评论列表
      commentList: [],
      // 医生个人详情显示
      isshow: false,
      // 课程列表
      showType: false,
      //mock
      flowList: [], //课程列表数据
      courseList: [
        {
          price: 35,
          title: "北国风光，千里冰封，万里雪飘北国风光，千里冰封，万里雪飘",
          shop: "123",
          image:
            "http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg",
          isFree: false, //是否免费
          isBuy: false, //是否购买
        },
      ],
      loadStatus: "查看更多",
      page: 10,
      // 专家评价
      expertEvaluate: {
        expertId: 0,
        keyword: "",
        page: 1,
        rows: 10,
        sortField: "",
        sortType: "",
      },
      // 专家知识参数
      expertKnowledge: {
        expertId: 0,
        keyword: "",
        page: 1,
        rows: 10,
        sortField: "",
        sortType: "",
        type: "",
      },
      // 专家知识列表
      expertKnowledgeData: [],
      siteName: "",
      siteId: "",
    };
  },
  onLoad(options) {
    console.log(options);
    this.doctorId = options.doctorId;
    this.siteName = options.siteName;
    this.siteId = options.siteId;
    this.expertKnowledge.expertId = options.doctorId;
    const pram = {
      ...this.expertEvaluate,
      expertId: this.doctorId,
    };
    console.log("评价参数", options.doctorId);

    this.getExpertData(this.doctorId);
    this.getComment(pram); //获取评论信息
  },
  methods: {
    //返回按钮
    backHandle() {
      uni.navigateBack();
    },
    //根据ID获取专家信息
    async getExpertData(id) {
      let res = await API.getExpertDetail(id);
      console.log("医生详情", res);
      if (res.code === 200) {
        this.doctorData = res.result;
        uni.setStorageSync("expertDetail", this.doctorData);
      }
    },
    // 评论列表
    async getComment(item) {
      // console.log(id);
      // const pram = {
      // 	page: 1,
      // 	rows: 10,
      // 	expertId: item,
      // }
      let res = await API.getExpertEvalList(item);
      if (res.code === 200) {
        console.log("医生评价", res.result);
        const data = res.result.rows;
        // data.map(item=> {
        // 	item.nickName =
        // })
        this.commentList = data;
      }
    },
    // 查询指定专家的知识（健康科普）
    async getExpertKnowledge(item) {
      let res = await API.expertKnowledge(item);
      if (res.code === 200) {
        this.expertKnowledgeData = res.result.rows;
        console.log("资讯", res.result.rows);
      }
    },
    // 开始咨询
    toStartConsulting() {
      // 跳转
      if (this.doctorData.consultOpen == 1) {
        uni.navigateTo({
          url: `/pages/mine/myConsultation/startConsulting?id=${this.doctorId}&realName=${this.doctorData.realName}`,
        });
      }
    },
    //开始预约挂号
    toStartRegister() {
      if (this.doctorData.registerOpen == 1) {
        uni.navigateTo({
          url: `/pages/mine/myRegister/startRegister?expertId=${this.doctorId}&expertName=${this.doctorData.realName}&consultPrice=${this.doctorData.consultPrice}&siteName=${this.siteName}&siteId=${this.siteId}`,
        });
      }
    },
    // tab 切换
    change(index) {
      this.current = index;
      if (index === 1) {
        let data = {
          expertId: this.doctorData.expertStatistics.expertId,
        };
        API.getTestList(data).then((res) => {
          console.log(res);
          this.flowList = res.result;
        });
      } else if (index === 3) {
        // 查询指定专家的知识（健康科普）
        this.getExpertKnowledge(this.expertKnowledge);
      }
      console.log(index);
    },
    animationfinish({ detail: { current } }) {
      //轮播切换完成
      this.current = current;
    },
    // 跳转到全部回复
    toAllReply() {
      uni.navigateTo({
        url: "/pages/doctor/comment/reply",
      });
    },
    // 点赞
    // getLike(index) {
    // 	this.commentList[index].isLike = !this.commentList[index].isLike;
    // 	if (this.commentList[index].isLike == true) {
    // 		this.commentList[index].likeNum++;
    // 	} else {
    // 		this.commentList[index].likeNum--;
    // 	}
    // },

    //查看医生个人详情
    viewDetail() {
      this.isshow = true;
    },
    // 发表评论
    // subcomment() {
    //   let data = {
    //     expertId: this.doctorId,
    //     userEvaluate: this.commentsVal
    //   }
    //   API.addEval(data).then((res) => {
    //     if (res.success) {
    //       this.commentsVal = ''
    //       this.getExpertEvalList()
    //     }
    //   })
    // },
    // getExpertEval() {
    //   let data = {
    //     page: 1,
    //     rows: 10,
    //     expertId: this.doctorId
    //   }
    //   API.getExpertEvalList(data).then((res) => {
    //     this.commentList = res.result.rows
    //   })
    // },
    //加载更多
    addRandomData() {
      this.loadStatus = "加载中";
      for (let i = 0; i < 10; i++) {
        let index = this.$u.random(0, this.courseList.length - 1);
        // 先转成字符串再转成对象，避免数组对象引用导致数据混乱
        let item = JSON.parse(JSON.stringify(this.courseList[index]));
        item.id = this.$u.guid();
        this.flowList.push(item);
      }
    },
    //去课程详情
    toCourseDetail(id) {
      let data = {
        id,
      };
      uni.navigateTo({
        url: "/pages/course/courseDetail?val=" + JSON.stringify(data),
      });
    },
    // 点赞
    goodexpert() {
      let data = {
        expertId: this.doctorId,
      };
      API.goodDoctor(data).then((res) => {
        if (res.success) {
          this.getExpertData(this.doctorId);
          uni.showToast({
            title: "点赞成功",
            duration: 2000,
          });
        }
      });
    },
    // 分享
    shareHandle() {
      // 打开分享界面
    },
    // 关注
    concern() {
      let data = {
        idolId: this.doctorId,
        type: 0,
      };
      API.concernExpert(data).then((res) => {
        if (res.success) {
          this.doctorData.focus = !this.doctorData.focus;
          if (this.doctorData.focus) {
            uni.showToast({
              title: "关注成功",
              duration: 2000,
            });
          } else {
            uni.showToast({
              title: "已取消关注",
              duration: 2000,
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/static/css/courseList2.scss";

.content {
  display: flex;
  flex-direction: column;
  background: $page-bg-base;
}

// 顶部医生
.doctor-top {
  position: relative;
  height: 540rpx;

  // 导航
  .nav-bar {
    width: 100vw;
    height: 132rpx;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 36rpx;
    color: #fff;
    padding: 0rpx 29rpx 0rpx 35rpx;
    position: fixed;
    top: 0rpx;
    left: 0;
    z-index: 500000;

    > .img:first-child {
      width: 18rpx;
      height: 32rpx;
    }

    > .img:last-child {
      width: 35rpx;
      height: 35rpx;
    }
  }

  //顶部医生的内容
  .doctor-content {
    width: 100%;
    height: 100%;
    padding: 0 30rpx;
    position: fixed;
    top: 0rpx;
    left: 0rpx;
    color: #fff;
    background: url("../../static/img/doctor/bg.png") no-repeat top center;
    background-size: contain;

    //医生描述
    .doctor-desc {
      margin-top: 161rpx;

      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 160rpx;

      .name-score {
        margin-left: 30rpx;
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .name {
          font-size: 40rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffffff;
          line-height: 40rpx;
        }
      }

      // 关注
      .follow-btn {
        width: 120rpx;
        height: 46rpx;
        color: #fff;
        background: #f4333c;
        border-radius: 23rpx;
        line-height: 46rpx;
        text-align: center;
      }
      .follow-btn2 {
        width: 120rpx;
        height: 46rpx;
        color: #fff;
        background: #ccc;
        border-radius: 23rpx;
        line-height: 46rpx;
        text-align: center;
      }
      // 关注
      .follow-btn2 {
        width: 120rpx;
        height: 46rpx;
        color: #fff;
        background: #ccc;
        border-radius: 23rpx;
        line-height: 46rpx;
        text-align: center;
      }
    }

    // 擅长描述
    .special-desc {
      margin-top: 40rpx;
      margin-bottom: 30rpx;
      line-height: 44rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #f4333c;
      opacity: 0.6;

      .desc {
        color: #ffffff;
        font-weight: normal;
      }
    }
  }
}

//主体
.main-content {
  // flex: 1;
  display: flex;
  flex-direction: column;
  width: 750rpx;
  // height: calc(100% - 540rpx);//这里和上面的高冲突超出了
  position: absolute;
  // top:calc(540rpx - 100vh) ;
  top: 520rpx;
  left: 0;
  // mmargin-left: -375rpx;
  height: 1100rpx;
  // height: 1072rpx;
  background: #f5f5f5;
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  overflow: hidden;
  // overflow-y: scroll;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
  // transform: translateY(-40rpx);
}

// 导航
// .switch-tab {

// }

// 轮播
.swiper-box {
  flex: 1;
  margin-top: 30rpx;
}

//两张横图
.main-layout {
  width: 100%;
  padding: 0 30rpx 30rpx;

  .flex-two {
    width: 100%;
    display: flex;
    justify-content: space-around;
    overflow: hidden;

    .flex-item {
      width: 45%;
      height: 150rpx;
      padding: 37rpx 0 0 20rpx;

      &:nth-child(1) {
        background: url("../../static/img/doctor/bg1.png") no-repeat top center;
        background-size: cover;

        .title {
          color: #2dacfc;
        }

        .ask-btn {
          background: #2dacfc;
        }
      }

      &:nth-child(2) {
        background: url("../../static/img/doctor/bg2.png") no-repeat top center;
        background-size: cover;

        .title {
          color: #ff5663;
        }

        .ask-btn {
          background: #ff5663;
        }
      }

      .title {
        margin-bottom: 14rpx;
        font-size: 28rpx;
        font-family: "PingFang SC";
        font-weight: bold;
        line-height: 40rpx;
      }

      .ask-btn {
        width: 150rpx;
        height: 46rpx;
        border-radius: 23rpx;
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
        line-height: 46rpx;
        text-align: center;
      }
    }
  }
}

//患者评价
.patient-evaluation {
  width: 690rpx;
  // height: calc(100vh-900rpx);
  height: auto;
  background: #ffffff;
  border-radius: 14rpx;
  margin: 0 auto;
  // overflow-y: scroll;

  .comment {
    display: flex;
    padding: 30rpx;

    .left {
      image {
        width: 64rpx;
        height: 64rpx;
        border-radius: 50%;
        background-color: #f2f2f2;
      }
    }

    .right {
      flex: 1;
      padding-left: 20rpx;
      font-size: 30rpx;

      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10rpx;

        .name {
          color: #5677fc;
        }

        .like {
          display: flex;
          align-items: center;
          color: #9a9a9a;
          font-size: 26rpx;

          .num {
            margin-right: 4rpx;
            color: #9a9a9a;
          }
        }

        .highlight {
          color: #5677fc;

          .num {
            color: #5677fc;
          }
        }
      }

      .content {
        margin-bottom: 10rpx;
      }

      .reply-box {
        background-color: rgb(242, 242, 242);
        border-radius: 12rpx;

        .item {
          padding: 20rpx;
          border-bottom: solid 2rpx $u-border-color;

          .username {
            font-size: 24rpx;
            color: #999999;
          }
        }

        .all-reply {
          padding: 20rpx;
          display: flex;
          color: #5677fc;
          align-items: center;

          .more {
            margin-left: 6rpx;
          }
        }
      }

      .bottom {
        margin-top: 20rpx;
        display: flex;
        font-size: 24rpx;
        color: #9a9a9a;

        .reply {
          color: #5677fc;
          margin-left: 10rpx;
        }
      }
    }
  }
  .demo-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  //查看更多-单独样式
  .view-more {
    height: 150rpx;
    background: $page-bg-base;
    padding-top: 44rpx;
  }
}

// 空白区
.header-kong {
  width: 100vw;
  height: 866rpx;
}

.footer-kong {
  width: 100vw;
  height: 120rpx;
}
.demo-warter2 {
  position: relative;
  overflow: hidden;
}
.isTop {
  transform: rotate(-2deg);
  position: absolute;
  height: 40rpx;
  color: #fff;
  width: 100rpx;
  text-align: center;
  z-index: 20;
  left: 14rpx;
  top: 18rpx;
  .top-img {
    width: 100rpx;
    height: 100rpx;
  }
}
//医生个人详情
.person-detail {
  width: 750rpx;
  height: 980rpx;
  background: #ffffff;
  border-radius: 20rpx 20rpx 0px 0px;

  .popup-title {
    height: 136rpx;
    padding: 60rpx 0 44rpx;
    text-align: center;
    font-size: 34rpx;
    font-weight: bold;
    color: #333333;
  }

  .popup-desc-top {
    display: flex;
    align-items: center;

    > .img {
      width: 170rpx;
      height: 170rpx;
      margin-right: 30rpx;
    }

    .right-desc {
      height: 100%;
      padding-top: 50rpx;
    }
  }

  .popup-desc-content {
    margin-bottom: 44rpx;

    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 40rpx;

    .desc-content {
      font-weight: 500;
      color: #666666;
    }
  }
}
.commets-input2 {
  width: 100%;
  height: 250rpx;
  padding: 30rpx;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  .text {
    padding: 10rpx;
    //   width: 100%;
    border: 1px solid #ccc;
  }
  .subcomment2 {
    background-color: #ff5663;
    position: absolute;
    padding: 20rpx;
    color: #fff;
    right: 20rpx;
    bottom: 0;
    border-radius: 4rpx;
    margin-top: 10rpx;
  }
}
.like-btn {
  > view {
    margin: 40rpx 0;
  }
}
</style>
